import React from 'react'

import SmallCoin from "../../../../../../res/images/web/shared/coin.png"
import './GiftItem.css'
import {GiftMapper} from "../../../../../../utils/constants";
import CheckTriBox from "../../../../../../shared-components/CreditCard/CheckTriBox/CheckTriBox";

const GiftItem = props => {

    // const IconList = [Icon1, Icon2, Icon3, Icon4, Icon5, Icon6, Icon7, Icon8]
    // const mapper = {
    //     'UFO': Icon1,
    //     '冲天火箭': Icon2,
    //     '超级跑车': Icon3,
    //     '双彩虹': Icon4,
    //     '82年雪碧': Icon5,
    //     '玫瑰花': Icon6,
    //     '棒棒糖': Icon7,
    //     '赞': Icon8,
    // }
    const mapper = GiftMapper

    const {
        gift: {
            Id: id,
            Name: name,
            Gold: price,
            selected,
            count: quantity,
        },
    } = props
    // console.log(props)

    const containerStyle = {
        border: selected ? '2px solid var(--global-color)' : null,
        // boxShadow: selected ? '0px 2px 4px 0px rgba(0,22,35,0.1)' : null,
    }

    const quantityIcon = (
        <div className='chat-footer-popup-item-quantity'>
            <span>{quantity}</span>
        </div>
    )

    const gift = (
        <div
            className='chat-footer-popup-item'
            style={containerStyle}
            {...props}
        >
            <img src={mapper[`gift_${id}`]?.src} alt='' style={{width: 48,}}/>

            <p className='chat-footer-popup-item-name'>{name}</p>
            <div className='flex-space-between-align-center'>
                <img src={SmallCoin} alt='' />
                <p className='chat-footer-popup-item-price'>{price}</p>
            </div>
            {quantity ? quantityIcon : null}
            {selected ? <CheckTriBox /> : null}
        </div>
    )

    if (quantity === 0) return null

    return gift
}

export default GiftItem
